<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      rel="stylesheet"
      href="../../lib/bootstrap-3.3.5-dist/css/bootstrap.min.css"
    />
    <link rel="stylesheet" href="../../src/font/字体图标/iconfont.css" />
    <script src="../../src/font/字体图标/iconfont.js"></script>
    <script src="../../lib/bootstrap-3.3.5-dist/js/jquery-1.11.3.js"></script>
    <script src="../../lib/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../../css/pinglun.css" />
  </head>
  <body>
    <div class="container-fluid">
      <div class="shan-box">
        <div id="modal">
          <span>确认删除后，对应的评论将会被彻底删除，不会被看到</span>

          <button id="qx">取消</button>
          <button id="qd">确认</button>
        </div>
      </div>

      <div class="search">
        <label>
          <input type="text" id="DrName" placeholder="请输入医生名字" />
        </label>

        <button class="btn-search">
          <span class="iconfont icon-chaxun"></span> 查询
        </button>
        <button class="btn-reset">重置</button>
      </div>
      <div class="content">
        <table>
          <thead>
            <tr>
              <th>ID</th>
              <th>订单编号</th>
              <th>医生名称</th>
              <th>医生头像</th>
              <th>星级</th>
              <th>患者</th>
              <th>评论内容</th>
              <th>评论时间</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody></tbody>
        </table>
        <div id="pageDiv">
          <div id="allPage"></div>
          <select>
            <option value="1">10条/页</option>
          </select>
          <span id="pre"> < </span>

          <span class="page">1</span>

          <span id="next"> > </span>
          <div id="tiaozhuan">
            <span>前往</span>
            <input type="text" id="tiaopage" />
            <span>页</span>
            <button id="tiao">跳转</button>
          </div>
        </div>
      </div>
    </div>
  </body>
  <script>
    let arr = [
      {
        id: 1,
        num: "LO92836352810",
        dr: "Mr.Ge",
        icon: "iconfont icon-tuxiang-mianxing",
        star: "5星",
        patient: "小升",
        ping: "医生非常有耐心，感觉体验很好",
        time: "2020-10-10 10:00:00",
      },
      {
        id: 2,
        num: "LO92836352811",
        dr: "Mr.Ge",
        icon: "iconfont icon-tuxiang-mianxing",
        star: "5星",
        patient: "小米",
        ping: "医生非常有耐心，感觉体验很好",
        time: "2020-10-10 10:00:00",
      },
      {
        id: 3,
        num: "LO92836352812",
        dr: "Mr.Ge",
        icon: "iconfont icon-tuxiang-mianxing",
        star: "4.5星",
        patient: "小米",
        ping: "感觉一般般",
        time: "2020-10-10 10:00:00",
      },
      {
        id: 4,
        num: "LO92836352813",
        dr: "Mr.Wang",
        icon: "iconfont icon-tuxiang-mianxing",
        star: "4星",
        patient: "Mr.Liu",
        ping: "感觉一般般",
        time: "2020-10-10 10:00:00",
      },
      {
        id: 5,
        num: "LO92836352814",
        dr: "Mr.Huang",
        icon: "iconfont icon-tuxiang-mianxing",
        star: "4星",
        patient: "Mr.Wang",
        ping: "感觉一般般",
        time: "2020-10-10 10:00:00",
      },
      {
        id: 6,
        num: "LO92836352815",
        dr: "会飞的松鼠",
        icon: "iconfont icon-tuxiang-mianxing",
        star: "4星",
        patient: "Mr.Wu",
        ping: "感觉一般般",
        time: "2020-10-10 10:00:00",
      },
      {
        id: 7,
        num: "LO92836352816",
        dr: "小升",
        icon: "iconfont icon-tuxiang-mianxing",
        star: "4星",
        patient: "Mr.Huang",
        ping: "感觉一般般",
        time: "2020-10-10 10:00:00",
      },
      {
        id: 8,
        num: "LO92836352817",
        dr: "小升",
        icon: "iconfont icon-tuxiang-mianxing",
        star: "4星",
        patient: "Mr.Wu",
        ping: "感觉一般般",
        time: "2020-10-10 10:00:00",
      },
      {
        id: 9,
        num: "LO92836352818",
        dr: "小升",
        icon: "iconfont icon-tuxiang-mianxing",
        star: "4星",
        patient: "Mr.Wu",
        ping: "感觉一般般",
        time: "2020-10-10 10:00:00",
      },
      {
        id: 10,
        num: "LO92836352819",
        dr: "小升",
        icon: "iconfont icon-tuxiang-mianxing",
        star: "4星",
        patient: "Mr.Wu",
        ping: "感觉一般般",
        time: "2020-10-10 10:00:00",
      },
      {
        id: 11,
        num: "LO92836352820",
        dr: "小升",
        icon: "iconfont icon-tuxiang-mianxing",
        star: "4星",
        patient: "Mr.Wu",
        ping: "感觉一般般",
        time: "2020-10-10 10:00:00",
      },
      {
        id: 12,
        num: "LO92836352821",
        dr: "小升",
        icon: "iconfont icon-tuxiang-mianxing",
        star: "4星",
        patient: "Mr.Wu",
        ping: "感觉一般般",
        time: "2020-10-10 10:00:00",
      },
      {
        id: 13,
        num: "LO92836352822",
        dr: "小升",
        icon: "iconfont icon-tuxiang-mianxing",
        star: "4星",
        patient: "Mr.Wu",
        ping: "感觉一般般",
        time: "2020-10-10 10:00:00",
      },
      {
        id: 14,
        num: "LO92836352823",
        dr: "小升",
        icon: "iconfont icon-tuxiang-mianxing",
        star: "4星",
        patient: "Mr.Wu",
        ping: "感觉一般般",
        time: "2020-10-10 10:00:00",
      },
      {
        id: 15,
        num: "LO92836352824",
        dr: "小升",
        icon: "iconfont icon-tuxiang-mianxing",
        star: "4星",
        patient: "Mr.Wu",
        ping: "感觉一般般",
        time: "2020-10-10 10:00:00",
      },
      {
        id: 16,
        num: "LO92836352825",
        dr: "小升",
        icon: "iconfont icon-tuxiang-mianxing",
        star: "4星",
        patient: "Mr.Wu",
        ping: "感觉一般般",
        time: "2020-10-10 10:00:00",
      },
      {
        id: 17,
        num: "LO92836352826",
        dr: "小升",
        icon: "iconfont icon-tuxiang-mianxing",
        star: "4星",
        patient: "Mr.Wu",
        ping: "感觉一般般",
        time: "2020-10-10 10:00:00",
      },
      {
        id: 18,
        num: "LO92836352827",
        dr: "小升",
        icon: "iconfont icon-tuxiang-mianxing",
        star: "4星",
        patient: "Mr.Wu",
        ping: "感觉一般般",
        time: "2020-10-10 10:00:00",
      },
      {
        id: 19,
        num: "LO92836352828",
        dr: "小升",
        icon: "iconfont icon-tuxiang-mianxing",
        star: "4星",
        patient: "Mr.Wu",
        ping: "感觉一般般",
        time: "2020-10-10 10:00:00",
      },
      {
        id: 20,
        num: "LO92836352829",
        dr: "小升",
        icon: "iconfont icon-tuxiang-mianxing",
        star: "4星",
        patient: "Mr.Wu",
        ping: "感觉一般般",
        time: "2020-10-10 10:00:00",
      },
      {
        id: 21,
        num: "LO92836352830",
        dr: "小升",
        icon: "iconfont icon-tuxiang-mianxing",
        star: "4星",
        patient: "Mr.Wu",
        ping: "感觉一般般",
        time: "2020-10-10 10:00:00",
      },
      {
        id: 22,
        num: "LO92836352831",
        dr: "小升",
        icon: "iconfont icon-tuxiang-mianxing",
        star: "4星",
        patient: "Mr.Wu",
        ping: "感觉一般般",
        time: "2020-10-10 10:00:00",
      },
      {
        id: 23,
        num: "LO92836352832",
        dr: "小升",
        icon: "iconfont icon-tuxiang-mianxing",
        star: "4星",
        patient: "Mr.Wu",
        ping: "感觉一般般",
        time: "2020-10-10 10:00:00",
      },
      {
        id: 24,
        num: "LO92836352833",
        dr: "小升",
        icon: "iconfont icon-tuxiang-mianxing",
        star: "4星",
        patient: "Mr.Wu",
        ping: "感觉一般般",
        time: "2020-10-10 10:00:00",
      },
      {
        id: 25,
        num: "LO92836352834",
        dr: "小升",
        icon: "iconfont icon-tuxiang-mianxing",
        star: "4星",
        patient: "Mr.Wu",
        ping: "感觉一般般",
        time: "2020-10-10 10:00:00",
      },
      {
        id: 26,
        num: "LO92836352835",
        dr: "小升",
        icon: "iconfont icon-tuxiang-mianxing",
        star: "4星",
        patient: "Mr.Wu",
        ping: "感觉一般般",
        time: "2020-10-10 10:00:00",
      },
      {
        id: 27,
        num: "LO92836352836",
        dr: "小升",
        icon: "iconfont icon-tuxiang-mianxing",
        star: "4星",
        patient: "Mr.Wu",
        ping: "感觉一般般",
        time: "2020-10-10 10:00:00",
      },
      {
        id: 28,
        num: "LO92836352837",
        dr: "小升",
        icon: "iconfont icon-tuxiang-mianxing",
        star: "4星",
        patient: "Mr.Wu",
        ping: "感觉一般般",
        time: "2020-10-10 10:00:00",
      },
      {
        id: 29,
        num: "LO92836352835",
        dr: "小升",
        icon: "iconfont icon-tuxiang-mianxing",
        star: "4星",
        patient: "Mr.Wu",
        ping: "感觉一般般",
        time: "2020-10-10 10:00:00",
      },
      {
        id: 30,
        num: "LO92836352836",
        dr: "小升",
        icon: "iconfont icon-tuxiang-mianxing",
        star: "4星",
        patient: "Mr.Wu",
        ping: "感觉一般般",
        time: "2020-10-10 10:00:00",
      },
      {
        id: 31,
        num: "LO92836352837",
        dr: "小升",
        icon: "iconfont icon-tuxiang-mianxing",
        star: "4星",
        patient: "Mr.Wu",
        ping: "感觉一般般",
        time: "2020-10-10 10:00:00",
      },
      {
        id: 32,
        num: "LO92836352835",
        dr: "小升",
        icon: "iconfont icon-tuxiang-mianxing",
        star: "4星",
        patient: "Mr.Wu",
        ping: "感觉一般般",
        time: "2020-10-10 10:00:00",
      },
      {
        id: 33,
        num: "LO92836352836",
        dr: "小升",
        icon: "iconfont icon-tuxiang-mianxing",
        star: "4星",
        patient: "Mr.Wu",
        ping: "感觉一般般",
        time: "2020-10-10 10:00:00",
      },
      {
        id: 34,
        num: "LO92836352837",
        dr: "小升",
        icon: "iconfont icon-tuxiang-mianxing",
        star: "4星",
        patient: "Mr.Wu",
        ping: "感觉一般般",
        time: "2020-10-10 10:00:00",
      },
      {
        id: 35,
        num: "LO92836352835",
        dr: "小升",
        icon: "iconfont icon-tuxiang-mianxing",
        star: "4星",
        patient: "Mr.Wu",
        ping: "感觉一般般",
        time: "2020-10-10 10:00:00",
      },
      {
        id: 36,
        num: "LO92836352836",
        dr: "小升",
        icon: "iconfont icon-tuxiang-mianxing",
        star: "4星",
        patient: "Mr.Wu",
        ping: "感觉一般般",
        time: "2020-10-10 10:00:00",
      },
      {
        id: 37,
        num: "LO92836352837",
        dr: "小升",
        icon: "iconfont icon-tuxiang-mianxing",
        star: "4星",
        patient: "Mr.Wu",
        ping: "感觉一般般",
        time: "2020-10-10 10:00:00",
      },
      {
        id: 38,
        num: "LO92836352835",
        dr: "小升",
        icon: "iconfont icon-tuxiang-mianxing",
        star: "4星",
        patient: "Mr.Wu",
        ping: "感觉一般般",
        time: "2020-10-10 10:00:00",
      },
      {
        id: 39,
        num: "LO92836352836",
        dr: "小升",
        icon: "iconfont icon-tuxiang-mianxing",
        star: "4星",
        patient: "Mr.Wu",
        ping: "感觉一般般",
        time: "2020-10-10 10:00:00",
      },
      {
        id: 40,
        num: "LO92836352837",
        dr: "小升",
        icon: "iconfont icon-tuxiang-mianxing",
        star: "4星",
        patient: "Mr.Wu",
        ping: "感觉一般般",
        time: "2020-10-10 10:00:00",
      },
      {
        id: 41,
        num: "LO92836352835",
        dr: "小升",
        icon: "iconfont icon-tuxiang-mianxing",
        star: "4星",
        patient: "Mr.Wu",
        ping: "感觉一般般",
        time: "2020-10-10 10:00:00",
      },
      {
        id: 42,
        num: "LO92836352836",
        dr: "小升",
        icon: "iconfont icon-tuxiang-mianxing",
        star: "4星",
        patient: "Mr.Wu",
        ping: "感觉一般般",
        time: "2020-10-10 10:00:00",
      },
      {
        id: 43,
        num: "LO92836352837",
        dr: "小升",
        icon: "iconfont icon-tuxiang-mianxing",
        star: "4星",
        patient: "Mr.Wu",
        ping: "感觉一般般",
        time: "2020-10-10 10:00:00",
      },
      {
        id: 44,
        num: "LO92836352835",
        dr: "小升",
        icon: "iconfont icon-tuxiang-mianxing",
        star: "4星",
        patient: "Mr.Wu",
        ping: "感觉一般般",
        time: "2020-10-10 10:00:00",
      },
      {
        id: 45,
        num: "LO92836352836",
        dr: "小升",
        icon: "iconfont icon-tuxiang-mianxing",
        star: "4星",
        patient: "Mr.Wu",
        ping: "感觉一般般",
        time: "2020-10-10 10:00:00",
      },
    ];
    let searchArr = [];
    let dangqianyePage = 1;
    let dangqianyeData = [];
    let maxPage;
    let delId;

    search();
    // 查询按钮
    $(".btn-search").click(function () {
      dangqianyePage = 1;
      search();
    });
    // 查询函数
    function search() {
      let DrName = $("#DrName").val();
      searchArr = [...arr];
      if (DrName != "") {
        for (let i = 0; i < searchArr.length; i++) {
          if (DrName != searchArr[i].dr) {
            searchArr.splice(i, 1);
            i--;
          }
        }
      }
      showPage(searchArr);
      showData(searchArr, dangqianyePage);
    }
    // 重置按钮
    $(".btn-reset").click(function () {
      dangqianyePage = 1;
      $("#DrName").val("");
      search();
    });
    // 渲染tbody
    function show(data) {
      $("tbody").html("");
      for (let i = 0; i < data.length; i++) {
        $("tbody").append(`
            <tr>
                <td>${data[i].id}</td>    
                <td>${data[i].num}</td>    
                <td>${data[i].dr}</td>    
                <td><span class='${data[i].icon}'></span></td>    
                <td>${data[i].star}</td>    
                <td>${data[i].patient}</td>    
                <td>${data[i].ping}</td>    
                <td>${data[i].time}</td>   
                <td>
                    <button data-id='${data[i].id}' class='shan'>删除</button>    
                </td> 
            </tr>
            `);
      }
    }
    // 渲染页码样式
    function showPage(data) {
      maxPage = Math.ceil(data.length / 10);
      $("#allPage").text(`共${data.length}条`);
      $(".page").html("");
      for (let i = 1; i <= maxPage; i++) {
        $(".page").append(`<span class='addPage'>${i}</span>`);
      }
    }
    // 根据页码截取相应的数组 并且渲染
    function showData(data, pageNum) {
      let qishi = (pageNum - 1) * 10;
      dangqianyeData = data.slice(qishi, qishi + 10);
      show(dangqianyeData);
      $(".addPage")
        .eq(pageNum - 1)
        .addClass("active2")
        .siblings()
        .removeClass("active2");
      dangqianyePage = pageNum;
    }
    //  点击页码 渲染相应的数据
    $(".page").on("click", ".addPage", function () {
      showData(searchArr, parseInt($(this).text()));
    });
    // 上一页
    $("#pre").click(function () {
      if (dangqianyePage > 1) {
        let shangyiye = dangqianyePage - 1;
        showData(searchArr, shangyiye);
      }
    });
    // 下一页
    $("#next").click(function () {
      if (dangqianyePage < maxPage) {
        let xiayiye = dangqianyePage + 1;
        showData(searchArr, xiayiye);
      }
    });
    // 跳转页面
    $("#tiao").click(function () {
      console.log($("#tiaopage").val());
      let tiaopage = $("#tiaopage").val();
      for (let i = 1; i <= maxPage; i++) {
        if (tiaopage == i) {
          dangqianyePage = tiaopage;
        }
      }
      showData(searchArr, dangqianyePage);
    });

    // 删除按钮
    $("tbody").on("click", ".shan", function () {
      $(".shan-box").css({ display: "block" });
      delId = $(this).attr("data-id");
    });
    // 删除弹框中的取消按钮
    $("#qx").click(function () {
      $(".shan-box").css({ display: "none" });
    });
    // 删除弹框中的确认按钮
    $("#qd").click(function () {
      for (let i = 0; i < arr.length; i++) {
        if (delId == arr[i].id) {
          arr.splice(i, 1);
        }
      }
      search();
      $(".shan-box").css({ display: "none" });
    });
  </script>
</html>
